<script setup lang="ts">
import { reactive } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { travel_agency_task_guide_info_api } from "@/package/square/api/new_guide";
import { autoTask } from "@/utils/timer";
import { Date } from "@/utils/date";
import { numToDay } from "@/utils/number";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormButton from "@/components/form/button.vue";

onLoad((options) => {
  travel_agency_task_guide_info_api({ id: options?.id }).then((resp) => {
    infoData.type_name = resp.type_name;
    infoData.name = resp.name;
    infoData.work_year_name = resp.work_year_name;
    infoData.education_background_name = resp.education_background_name;
    infoData.salary_type = resp.salary_type;
    infoData.salary = resp.salary;
    infoData.max_salary = resp.max_salary;
    infoData.is_emergency = resp.is_emergency;
    infoData.start_time_int = resp.start_time_int;
    infoData.start_date = resp.start_date;
    infoData.end_date = resp.end_date;
    infoData.start_area_name = resp.start_area_name;
    infoData.end_area_name_arr = resp.end_area_name_arr;
    infoData.recept_count = resp.recept_count;
    infoData.route = resp.route;
    infoData.language_arr = resp.language_arr;
    infoData.guide_need_arr = resp.guide_need_arr;
    infoData.tag_arr = resp.tag_arr;
    infoData.desc = resp.desc;
    infoData.phone = resp.phone;
    infoData.travel_agency_info = resp.travel_agency_info;

    autoTaskStop = autoTask({ delay: 1000, immediate: true }, () => {
      const timestamp = Date.timestamp;

      if (infoData.is_emergency === 1 && infoData.start_time_int > timestamp) {
        // 急单才有倒计时
        infoData.start_time_arr = numToDay(
          infoData.start_time_int - timestamp
        ).split(":");
      }
    });
  });

  tempData.id = options?.id;
});
onUnload(() => autoTaskStop?.());

const infoData = reactive({
  type_name: "",
  name: "",
  work_year_name: "",
  education_background_name: "",
  salary_type: 1,
  salary: "",
  max_salary: "",
  is_emergency: 0,
  start_time_int: 0,
  start_time_arr: [] as string[],
  start_date: "",
  end_date: "",
  start_area_name: "",
  end_area_name_arr: [] as string[],
  recept_count: "",
  route: "",
  language_arr: [] as string[],
  guide_need_arr: [] as string[],
  tag_arr: [] as string[],
  desc: "",
  phone: "",
  travel_agency_info: {} as any,
});

let autoTaskStop: (() => void) | undefined = undefined;
const tempData = { id: "" };
</script>

<template>
  <view class="detail-info">
    <view class="detail-info-name">
      <text class="detail-info-type">{{ infoData.type_name }}</text
      >{{ infoData.name }}
    </view>
    <view style="display: flex; align-items: center">
      <image
        class="detail-info-icon"
        src="@/package/square/static/task-detail-duration.png"
      />
      <view class="detail-info-desc">{{ infoData.work_year_name }}</view>
      <image
        class="detail-info-icon"
        src="@/package/square/static/task-detail-education.png"
      />
      <view class="detail-info-desc">
        {{ infoData.education_background_name }}
      </view>

      <view class="detail-info-price">
        <template v-if="infoData.salary_type === 3">议价</template>
        <template v-else>
          <text class="detail-info-price2">￥</text>{{ infoData.salary }}-{{
            infoData.max_salary
          }}<text class="detail-info-price2" v-if="infoData.salary_type === 2"
            >/日</text
          >
        </template>
      </view>
    </view>

    <view class="detail-info-count" v-if="infoData.is_emergency === 1">
      <image
        class="detail-info-count2"
        src="@/package/square/static/task-detail-emergency.png"
      />
      <view class="detail-info-count3">该职位为紧急任务</view>
      <view class="task-item-count4">距结束</view>
      <view class="task-item-count5">{{ infoData.start_time_arr[0] }}</view>
      <view class="task-item-count6">天</view>
      <view class="task-item-count5">{{ infoData.start_time_arr[1] }}</view>
      <view class="task-item-count6">时</view>
      <view class="task-item-count5">{{ infoData.start_time_arr[2] }}</view>
      <view class="task-item-count6">分</view>
    </view>
  </view>

  <view class="detail-btn">
    <view @click="btnClick">
      <FormButton>提交</FormButton>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.detail-info {
  padding: 30rpx 20rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .detail-info-name {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    color: #2d2d2d;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-info-type {
    display: inline-block;
    vertical-align: top;
    padding: 0 10rpx;
    margin-top: 10rpx;
    margin-right: 10rpx;
    font-size: 20rpx;
    color: #8e5a1f;
    line-height: 32rpx;
    border-radius: 8rpx;
    background: linear-gradient(45deg, #fdecc7, #fed5b2);
  }

  .detail-info-icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .detail-info-desc {
    margin-right: 40rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }

  .detail-info-price {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 36rpx;
    color: #fa6400;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-info-price2 {
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .detail-info-count {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding-left: 30rpx;
    padding-right: 20rpx;
    margin-top: 30rpx;
    border-radius: 20rpx;
    background: linear-gradient(90deg, #ff4854, #fd9363);
  }

  .detail-info-count2 {
    width: 48rpx;
    height: 48rpx;
  }

  .detail-info-count3 {
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
    font-weight: bold;
  }

  .task-item-count4 {
    margin-left: auto;
    margin-right: 4rpx;
    font-size: 24rpx;
    color: #5e0000;
    line-height: 34rpx;
  }

  .task-item-count5 {
    width: 38rpx;
    margin: 0 6rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 38rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 4rpx;
    background-color: rgba(94, 0, 0, 0.15);
  }

  .task-item-count6 {
    font-size: 20rpx;
    color: #5e0000;
    line-height: 28rpx;
  }
}

.detail-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>